<template>
    <div class="profit_page">
        <div>
            <topnav pageindex="3"></topnav>
        </div>
        <div>
            <el-tabs v-model="ifDetail" type="card">
                <el-tab-pane label="汇总" name="summary">汇总</el-tab-pane>
                <el-tab-pane label="详情" name="detail">详情</el-tab-pane>
            </el-tabs>
        </div>
        <div v-show="ifDetail!='detail'">
            <div class="choose_tab">
                <div>
                    <el-row>
                        <el-col :span="10" :offset="2">
                            <el-row>
                                <el-col :span="4">
                                    <div class="lb">DATE:</div>
                                </el-col>
                                <el-col :span="9">
                                    <div>
                                        <el-date-picker
                                            v-model="chsumDate"
                                            type="month"
                                            placeholder="Month"
                                            :editable="false"
                                            :picker-options="dateOption">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <div style="margin-top:20px;text-align:left;">
                    <el-row>
                        <el-col :span="4" :offset="3">
                            <el-button type="primary" icon="search" :loading="issumload" @click="getSummary()">SEARCH</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="maindata" v-show="showsummary">
                <div class="tbwrap">
                    <el-table
                        :data="sumData"
                        border
                        show-summary
                        @expand="showPayments"
                        style="width: 100%">
                        <el-table-column type="expand">
                            <template scope="props">
                                <div>
                                    <div class="paytit">转账记录</div>
                                    <div class="all-count">
                                        <span class="out-count">累计转账:&nbsp;{{payOut[(props.row.coin.toLowerCase())]}}</span>
                                        <span class="return-count">累计归还:&nbsp;{{payReturn[(props.row.coin.toLowerCase())]}}</span>
                                    </div>
                                    <el-table
                                        :data="paysData[(props.row.coin.toLowerCase())]">
                                        <el-table-column
                                            label="Tx ID(借)">
                                            <template scope="scope">
                                                <span><a :href="payurl[(props.row.coin.toLowerCase())]+scope.row.sTxId" target="_blank">{{scope.row.sTxId}}</a></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="Tx ID(还)">
                                            <template scope="scope">
                                                <span><a :href="payurl[(props.row.coin.toLowerCase())]+scope.row.rTxId" target="_blank">{{scope.row.rTxId}}</a></span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="owner"
                                            label="借币人">
                                        </el-table-column>
                                        <el-table-column
                                            prop="rOperator"
                                            label="归还人">
                                        </el-table-column>
                                        <el-table-column
                                            prop="sFrom"
                                            label="来自">
                                        </el-table-column>
                                        <el-table-column
                                            prop="sTo"
                                            label="转往">
                                        </el-table-column>
                                        <el-table-column
                                            prop="balance"
                                            label="金额">
                                        </el-table-column>
                                        <el-table-column
                                            label="时间">
                                            <template scope="scope">
                                                <span>{{api.dateFormat(scope.row.sTimeStamp,"yyyy-MM-dd hh:mm:ss")}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            prop="comments"
                                            label="备注">
                                        </el-table-column>
                                        <el-table-column
                                            label="是否已归还">
                                            <template scope="scope">
                                                <span>{{scope.row.isReturned ? "是" : "否"}}</span>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="币种">
                            <template scope="scope">
                                <span>{{scope.row.coin}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                            prop="revenuePps"
                            label="pps支出"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="revenuePplns"
                            label="pplns收益"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="revenueDiff"
                            label="收益差额"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="poolFree"
                            label="矿池手续费"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="blackAddr"
                            label="黑名单"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="walletBalance"
                            label="钱包余额"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            label="查看详情"
                            class-name="detail_btn">
                            <template scope="scope">
                                <span>
                                    <el-button type="primary" @click="gotoDetail(scope.row.coin)">详情</el-button>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div v-show="ifDetail=='detail'">
            <div class="choose_tab">
                <div>
                    <el-row>
                        <el-col :span="6">
                            <el-row>
                                <el-col :span="12">
                                    <div class="lb">COIN:</div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="seldiv">
                                        <el-select v-model="coinType" placehoder="" @change="coinChange">
                                            <el-option
                                                v-for="item in coins"
                                                :key="item"
                                                :label="item"
                                                :value="item">
                                            </el-option>
                                        </el-select>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="10" :offset="2">
                            <el-row>
                                <el-col :span="4">
                                    <div class="lb">DATE:</div>
                                </el-col>
                                <el-col :span="9">
                                    <div>
                                        <el-date-picker
                                            v-model="chDate"
                                            type="month"
                                            placeholder="Month"
                                            :editable="false"
                                            :picker-options="dateOption">
                                        </el-date-picker>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <div style="margin-top:20px;text-align:left;">
                    <el-row>
                        <el-col :span="4" :offset="3">
                            <el-button type="primary" icon="search" :loading="isload" @click="getData()">SEARCH</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="maindata" v-show="showmain">
                <div class="wbwrap">
                    <span>钱包结余({{balanceMonth}})：</span>
                    <span>{{mwalletBalance && (parseFloat(mwalletBalance.walletBalance - mwalletBalance.unpaidBalance).toFixed(8))}}</span>
                    <span>[钱包余额:&nbsp;{{(mwalletBalance && mwalletBalance.walletBalance)}},&nbsp;未支付:{{(mwalletBalance && mwalletBalance.unpaidBalance)}}]</span>
                </div>
                <div class="tbwrap">
                    <el-table
                        :data="showData"
                        border
                        show-summary
                        style="width: 100%">
                        <el-table-column
                            prop="logTime"
                            label="日期"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="revenuePps"
                            label="pps支出"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="revenuePplns"
                            label="pplns收益"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="revenueDiff"
                            label="收益差额"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="blackAddr"
                            label="黑名单"
                            sortable>
                        </el-table-column>
                        <el-table-column
                            prop="poolFree"
                            label="矿池手续费"
                            sortable>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import topnav from '@/components/common/topnav.vue';
    let tempcointype = "";
    export default {
        name: "profit",
        data() {
            return {
                coinType: "",
                ifDetail: "summary",
                coins: ["ETH", "ETC", "EXP", "ZEC", "SC"],
                showmain: false,
                showsummary: false,
                chsumDate: "",
                chDate: "",
                dateOption: {
                    disabledDate(time) {
                        return time.getTime() > ((new Date()).getTime());
                    }
                },
                isload: false,
                issumload: false,
                resData: [],
                showData: [],
                balanceMonth: "",
                mwalletBalance: "",
                sumData: [],
                paysData: {
                    eth: [],
                    etc: [],
                    exp: [],
                    zec: [],
                    sia: []
                },
                payOut: {
                    eth: 0,
                    etc: 0,
                    exp: 0,
                    zec: 0,
                    sia: 0
                },
                payReturn: {
                    eth: 0,
                    etc: 0,
                    exp: 0,
                    zec: 0,
                    sia: 0
                },
                payurl: {
                    eth: "https://etherscan.io/tx/",
                    etc: "http://gastracker.io/tx/",
                    exp: "http://www.expanse.tech/explorer/tx/",
                    zec: "https://explorer.zcha.in/transactions/",
                    sia: "https://explore.sia.tech/hash.html?hash="
                }
            }
        },
        methods: {
            getData: function() {
                let that = this;
                if(that.isload) return;
                let reqData = {};
                if(!that.coinType) return;
                that.isload = true;
                let reqDate = "";
                if(that.chDate) {
                    var tempTime = that.chDate;
                } else {
                    var tempTime = new Date();
                }
                reqDate = that.api.dateFormat((tempTime.getTime()), "yyyy-MM");
                let reqUrl = "rewardHistory/" + that.coinType.toLowerCase() + "/monthSummary";
                that.api.get({
                    url: reqUrl,
                    data: {
                        month: reqDate
                    },
                    callback: function(data) {
                        that.showData = [];
                        that.nowPage = 1;
                        that.totalNum = 0;
                        var tempArr = [];
                        if(data.code == 0) {
                            var res = data.data;
                            for(var i in res) {
                                if(res[i]) {
                                    if(i != "WalletBalance") {
                                        tempArr.push({
                                            logTime: i,
                                            revenuePps: res[i].rewardHistory.revenuePps,
                                            revenuePplns: res[i].rewardHistory.revenuePplns,
                                            revenueDiff: res[i].rewardHistory.revenueDiff,
                                            poolFree: res[i].pool_fee,
                                            blackAddr: res[i].black_addr
                                        });
                                    } else {
                                        for(var j in res[i]) {
                                            that.balanceMonth = j;
                                            that.mwalletBalance = res[i][j];
                                        }
                                    }
                                }
                            }
                            that.showData = tempArr;
                        }
                        that.isload = false;
                        that.showmain = true;
                    },
                    failback: function() {
                        that.showData = [];
                        that.isload = false;
                        that.showmain = true;
                    }
                });
            },
            coinChange: function(newcointype) {
                if(newcointype != tempcointype) {
                    //this.chDate = "";
                    //this.dateOption = {};
                    this.isload = false;
                    this.showmain = false;
                    this.showData = [];
                    tempcointype = newcointype;
                }
            },
            getSummary: function() {
                let that = this;
                if(that.issumload) return;
                let reqData = {};
                that.issumload = true;
                let reqDate = "";
                if(that.chsumDate) {
                    var tempTime = that.chsumDate;
                } else {
                    var tempTime = new Date();
                }
                reqDate = that.api.dateFormat((tempTime.getTime()), "yyyy-MM");
                let reqUrl = "rewardHistory/monthSummary";
                that.api.get({
                    url: reqUrl,
                    data: {
                        month: reqDate
                    },
                    callback: function(data) {
                        that.sumData = [];
                        that.nowPage = 1;
                        that.totalNum = 0;
                        if(data.code == 0) {
                            var res = data.data;
                            for(var i in res) {
                                if(res[i]) {
                                    let tpbalance = null;
                                    if(res[i].WalletBalance) {
                                        for(var j in res[i].WalletBalance) {
                                            tpbalance = res[i].WalletBalance[j];
                                        }
                                    }
                                    that.sumData.push({
                                        coin: i,
                                        revenuePps: (res[i].rewardHistory.revenuePps!==null?(res[i].rewardHistory.revenuePps):("暂无数据")),
                                        revenuePplns: (res[i].rewardHistory.revenuePplns!==null?(res[i].rewardHistory.revenuePplns):("暂无数据")),
                                        revenueDiff: (res[i].rewardHistory.revenueDiff!==null?(res[i].rewardHistory.revenueDiff):("暂无数据")),
                                        poolFree: (res[i].pool_fee!==null?(res[i].pool_fee):("暂无数据")),
                                        blackAddr: (res[i].black_addr!==null?(res[i].black_addr):("暂无数据")),
                                        walletBalance: (tpbalance!==null?(tpbalance):("暂无数据"))
                                    });
                                }
                            }
                        }
                        that.issumload = false;
                        that.showsummary = true;
                    },
                    failback: function() {
                        that.sumData = [];
                        that.issumload = false;
                        that.showsummary = true;
                    }
                });
            },
            gotoDetail: function(coin) {
                coin = coin.toUpperCase();
                this.coinType = coin;
                this.chDate = this.chsumDate;
                this.ifDetail = "detail";
                this.getData();
            },
            showPayments: function(exprow, expanded) {
                if(exprow && exprow.coin && expanded) {
                    let that = this;
                    let tempCoin = exprow.coin.toLowerCase();
                    that.payOut[tempCoin] = "";
                    that.payReturn[tempCoin] = "";
                    let reqUrl = "transactionHistory/" + exprow.coin.toLowerCase() + "/list";
                    that.api.get({
                        url: reqUrl,
                        data: {
                            month: that.api.dateFormat((that.chsumDate.getTime()),"yyyy-MM")
                        },
                        callback: function(data) {
                            if(data && (data.code==0)) {
                                if(data.data) {
                                    that.payOut[tempCoin] = 0;
                                    that.payReturn[tempCoin] = 0;
                                    that.paysData[tempCoin] = data.data;
                                    for(var i = 0; i < that.paysData[tempCoin].length; i ++) {
                                        if(that.paysData[tempCoin][i].balance) {
                                            that.payOut[tempCoin] += that.paysData[tempCoin][i].balance;
                                            if(that.paysData[tempCoin][i].isReturned) {
                                                that.payReturn[tempCoin] += that.paysData[tempCoin][i].balance;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    });
                }
            }
        },
        mounted: function() {
            this.api.get({
                url: "checklogin",
                data: {},
                callback: function(data) {}
            });
        },
        components: {
            topnav
        }
    }
</script>
<style>
    .profit_page .choose_tab {
        margin: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #e0e0e0;
    }
    .profit_page .choose_tab .lb {
        text-align: right;
        line-height: 35px;
        margin-right: 10px;
    }
    .profit_page .el-table th>.cell {
        text-align: center;
    }
    .profit_page .maindata .tbwrap {
        margin: 25px;
    }
    .profit_page .el-tabs__item {
        padding: 0px 30px;
        font-size: 14px;
    }
    .profit_page .el-tabs {
        margin: 10px;
    }
    .profit_page .el-tabs__content {
        display: none;
    }
    .profit_page .detail_btn .cell {
        margin: 5px 0px;
    }
    .profit_page .paytit {
        margin: 5px 0px;
    }
    .profit_page .all-count {
        margin-bottom: 10px;
    }
    .profit_page .out-count {
        margin-right: 10px;
    }
    .profit_page a {
        color: #276ab0;
        text-decoration: none;
    }
    .profit_page .maindata .wbwrap {
        text-align: left;
        margin-left: 25px;
    }
</style>